<template>
  <!-- 确认订单页面 -->
  <div class="confirm" v-loading="loading">
    <div class="container">
      <h3>收获地址</h3>
      <div class="addr-container">
        <div
          class="addr-item"
          v-for="(item, index) of addrList"
          :key="index"
          :class="[shippingid === item.id ? artical : '']"
          :data-id="item.id"
          @click="checkAddr"
        >
          <div>
            <p class="name">{{ item.receiverName }}</p>
            <p class="number">{{ item.receiverMobile }}</p>
            <p class="addr">
              {{ item.receiverProvince }} {{ item.receiverDistrict }}
              {{ item.receiverCity }} {{ item.receiverAddress }}
            </p>
          </div>
          <div class="btns">
            <span class="iconfont" @click="removeAddr(item.id)">&#xe621;</span>
            <span class="iconfont" @click="setModelInfo(index)">&#xe606;</span>
          </div>
        </div>
        <div class="add-addr-btn" @click="openModel">
          <span class="iconfont">&#xe618;</span>
          <p>添加新地址</p>
        </div>
      </div>
      <div class="product-box">
        <h3>商品</h3>
        <div
          class="product-item flex-space-bet"
          v-for="item of productList"
          :key="item.id"
        >
          <div class="img">
            <img :src="item.productMainImage" />
            <span class="desc">{{ item.productName }}</span>
          </div>
          <div class="price">
            {{ item.productPrice }}元<span class="iconfont">&#xe66c;</span
            >{{ item.quantity }}
          </div>
          <div class="total-price red">{{ item.productTotalPrice }}元</div>
        </div>
      </div>
      <div class="pei">
        <span class="name">配送方式</span>
        <span class="ctx red">包邮</span>
      </div>
      <div class="invoice">
        <span class="name">发票</span>
        <span class="ctx red">电子发票 个人 商品明细</span>
      </div>
      <div class="details">
        <div class="number">
          <span class="name">商品件数：</span>
          <span class="ctx red">{{ detail.cartTotalQuantity }}件</span>
        </div>
        <div class="price">
          <span class="name">商品总价：</span>
          <span class="ctx red">{{ detail.cartTotalPrice }}元</span>
        </div>
        <div class="activity">
          <span class="name">优惠活动：</span>
          <span class="ctx red">0元</span>
        </div>
        <div class="freight">
          <span class="name">运费：</span>
          <span class="ctx red">0元</span>
        </div>
        <div class="total">
          <span class="name">应付总额：</span>
          <span class="ctx red"
            >{{ detail.cartTotalPrice }}<span class="col">元</span></span
          >
        </div>
      </div>
      <div class="btns">
        <button class="goback" @click="goCartList">返回购物车</button>
        <button class="goshoping" @click="goPay">去结算</button>
      </div>
    </div>
    <add-address
      @closeModel="closeModel"
      :type="isAdd"
      :detail="addrList"
      :index="addrid"
    ></add-address>
  </div>
</template>

<script>
import AddAddress from "./components/Address";
export default {
  name: "Confirm",
  data() {
    return {
      loading: true,
      isAdd: false,
      productList: null,
      detail: {},
      addrList: null,
      isArtical: false,
      shippingid: 1,
      oldTarget: '',
      addrid: "", //-1；新增  0· ； 传递地址列表 索引
    };
  },
  methods: {
    closeModel(n) {
      this.isAdd = false;
      if (n == 1) {
        this.getAddrList();
      }
    },
    openModel() {
      this.addrid = -1;
      this.isAdd = true;
      // console.log(this.isAdd)
    },
    setModelInfo(id) {
      // alert(id)
      this.addrid = id;
      this.isAdd = true;
    },
    getAddrList() {
      this.loading = true;
      this.axios.get("/shippings").then((res) => {
        // console.log(res)
        this.addrList = res.list;
        this.loading = false;
      },() => {
        this.loading = false;
      });
    },
    removeAddr(id) {
      this.loading = true;
      this.axios.delete(`/shippings/${id}`).then((res) => {
        // alert(res);
        this.loading = false;
        this.$message(res);
        this.getAddrList();
      },() => {
        this.loading = false;
      });
    },
    getCartList() {
      this.loading = true;
      this.axios.get("/carts").then((res) => {
        this.detail = res;
        let list = res.cartProductVoList;
        let nowList = [];
        for (let item in list) {
          if (list[item].productSelected === true) {
            nowList.push(list[item]);
          }
        }
        this.productList = nowList;
        if (nowList.length == 0) {
          this.$message("您还没有中意的商品");
        }
      },() => {
        this.loading = false;
      });
    },
    goCartList() {
      this.$router.push("/cart");
    },
    goPay() {
        this.loading = true;
        this.axios.post('/orders',{
            shippingId: this.shippingid
        }).then(res => {
            // console.log(res.orderNo)
          this.loading = false;
            this.$router.push(`/cart/orderset/${res.orderNo}`)
        },() => {
          this.loading = false;
        })
    },
    checkAddr(e) {
    this.shippingid = e.target.dataset.id;
    if(e.target.className === "addr-item"){
        if(this.oldTarget){
            this.oldTarget.className = "addr-item"
        }
        e.target.classList.add('artical')
        this.oldTarget = e.target
    }
    },
  },
  mounted() {
    this.getAddrList();
    this.getCartList();
  },
  components: {
    AddAddress,
  },
};
</script>

<style lang="scss">
.confirm {
  background: #eee;
  padding: 32px 0 200px;
  .container {
    padding: 38px 0 0 63px;
    background: #fff;
    span {
      display: inline-block;
    }
    h3,
    div,
    .name,
    .ctx {
      text-align: left;
    }
    .details .name,
    .detail .ctx {
      text-align: right;
    }
    h3 {
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }
    .addr-container {
      padding: 21px 0 40px;
      margin-right: 64px;
      // border-bottom: 1px solid #E5E5E5;
      display: flex;
      flex-wrap: wrap;
    }
    .add-addr-btn,
    .addr-item {
      width: 260px;
      height: 180px;
      padding-top: 70px;
      border: 1px solid #e5e5e5;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999999;
      cursor: pointer;
      .iconfont {
        font-size: 30px;
      }
      p {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
      }
    }
    .artical {
      border: 1px solid #ff6600;
    }
    .addr-item {
      margin: 0 10px 10px 0;
      padding: 20px;
      // display: block;
      justify-content: space-between;
      align-items: flex-start;
      p {
        text-align: left;
      }
      .name {
        font-weight: 800;
        color: #666;
        padding-bottom: 10px;
      }
      .btns {
        padding: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
    .product-box {
      border-bottom: 1px solid #eee;
      h3 {
        font-size: 20px;
        font-weight: bold;
        line-height: 40px;
        border-bottom: 1px solid #eee;
      }
      .product-item {
        padding: 20px 0;
        .price,
        .total-price {
          flex: 1;
          text-align: right;
          padding-right: 50px;
        }
        .img {
          flex: 3;
          img {
            width: 40px;
            vertical-align: middle;
            margin-right: 10px;
          }
        }
      }
    }
    .pei,
    .invoice {
      font-size: 20px;
      line-height: 80px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      .name {
        width: 300px;
      }
    }
    .details {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      margin-top: 20px;
      margin-right: 20px;
      border-bottom: 1px solid #e5e5e5;
      line-height: 30px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #666666;
      .name {
        width: 200px;
      }
      .ctx {
        min-width: 100px;
        text-align: right;
        margin-right: 44px;
      }
      .total {
        line-height: 80px;
        .ctx {
          text-align: left;
          font-size: 29px;
          .col {
            font-size: 16px;
          }
        }
      }
    }
    .btns {
      text-align: right;
      padding: 37px 0 90px;
      button {
        width: 202px;
        height: 50px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
      }
      .goback {
        border: 1px solid #d7d7d7;
        background: #fff;
        color: #999999;
      }
      .goshoping {
        font-size: 18px;
        margin-left: 20px;
      }
    }
  }
}
</style>